import { debounce } from "../common/utils/utils.js";

const template = document.createElement("template");
template.innerHTML = /*html*/ `
<style>
  :host {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
  }
  .pendant-menu {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  .pendant-menu.menu-show {
    display: flex;
  }
  .pendant-menu div {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size:  min(8vw, 8vh);
  }
  .pendant-menu div:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
  .pendant-move.pendant-move-active {
    -webkit-app-region: drag;
  }
  .pendant-menu .pendant-delete:hover {
    background-color: rgba(255, 0, 0, 0.3);
  }
  .pendant-move-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(255, 255, 255, 0.3);
  }
  .pendant-move-cover.pendant-move-cover-active {
    display: block;
  }
  .pendant-move-area {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    -webkit-app-region: drag;
    display: none;
  }
  .pendant-move-area.pendant-move-area-active {
    display: block;
  }
  .pendant-refresh {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 25px;
    color: #333;
    background-color: rgba(51, 51, 51, 0.011);
  }
  .pendant-refresh .refresh-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .pendant-refresh.pendant-refresh-active {
    display: block;
  }
</style>

<slot></slot>
<div class="pendant-menu">
<div class="pendant-edit">编辑</div>
<div class="pendant-move">移动</div>
<div class="pendant-top">
  <icon-svg name="pin-top"></icon-svg>
  置顶
</div>
<div class="pendant-delete">删除</div>
</div>
<div class="pendant-move-cover"></div>
<div class="pendant-move-area"></div>
`;

export default class RightMenu extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: "closed" });
    const content = template.content.cloneNode(true);

    const editEl = content.querySelector(".pendant-edit");
    const menuEl = content.querySelector(".pendant-menu");
    const moveEl = content.querySelector(".pendant-move");
    const topEl = content.querySelector(".pendant-top");
    const deleteEl = content.querySelector(".pendant-delete");
    const moveCoverEl = content.querySelector(".pendant-move-cover");
    const moveAreaEl = content.querySelector(".pendant-move-area");

    if (window.ipcRenderer) {
      window.ipcRenderer.on("isAlwaysOnTop", (event, bool) => {
        if (bool) {
          topEl.style.color = "#6722ff";
        } else {
          topEl.style.color = "#fff";
        }
      });
    }

    // 窗口变化
    window.addEventListener(
      "resize",
      debounce(() => {
        if (window.sendSaveData) {
          let data = window.getData();
          window.sendSaveData(data);
        }
      }, 500)
    );

    // 鼠标右键菜单
    document.documentElement.oncontextmenu = (e) => {
      e.preventDefault();
      menuEl.classList.toggle("menu-show");
    };

    // 点击移动挂件
    moveEl.onclick = (e) => {
      e.stopPropagation();
      menuEl.classList.remove("menu-show");
      moveCoverEl.classList.add("pendant-move-cover-active");
      moveAreaEl.classList.add("pendant-move-area-active");
    };

    // 鼠标移出移动挂件区域
    moveCoverEl.onmouseout = (e) => {
      e.stopPropagation();
      moveCoverEl.classList.remove("pendant-move-cover-active");
      moveAreaEl.classList.remove("pendant-move-area-active");
      if (window.sendSaveData) {
        let data = window.getData();
        window.sendSaveData(data);
      }
    };

    editEl.onclick = (e) => {
      e.stopPropagation();
      window.getPosition();
      menuEl.classList.remove("menu-show");
    };

    topEl.onclick = (e) => {
      e.stopPropagation();
      menuEl.classList.remove("menu-show");
      window.alwaysOnTop();
    };

    deleteEl.onclick = (e) => {
      e.stopPropagation();
      menuEl.classList.remove("menu-show");
      window.closeWin();
    };

    shadow.appendChild(content);
  }

  async connectedCallback() {
    if (!customElements.get("icon-svg")) {
      let IconSvg = await import("./IconSvg/IconSvg.js");
      customElements.define("icon-svg", IconSvg.default);
    }
  }
}
